<template>
	<view class="index-page">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="搜索" isBackShow></free-nav-bar>	
		<!-- #endif -->
		<view class="index-content">
			<view id="head">
				<view class="search flex">
					<view class="search-input flex">
						<span class="search-icon sprite sprite-search"></span>
						<input type="text" v-model="queryForm.keyword" class="input font28 main-text-color" placeholder="输入你想买的">
					</view>
					<view class="search-btns flex font28" @click="searchHandle">搜索</view>
				</view>				
			</view>
			
			<view class="body">
				<view class="container">
					<free-list-item :tab-id="tabId" :listData="listData" @chooseHandle="chooseSpuHandle" :scrollerHeight="scrollerHeight"></free-list-item>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeTabsList from "@/components/free-ui/free-tabs-list.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	export default {
		components:{
			freeNavBar,
			freeListItem,
			freeTabsList
		},
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				tabId: undefined,
				tabList: [],
				listData: [],
				hasMore: true,
				queryForm: {
					pageNo: 1,
					pageSize: 10,
					keyword: undefined
				}
			}
		},
		onLoad(e) {
			console.log(e)
			if(e && e.keyword) {
				this.queryForm.keyword = e.keyword;
				this.queryForm.pageNo = 1;
				this.queryForm.pageSize = 10;
				this.getProductList()
			}
		},
		onShow() {
			this.$store.commit('initHome');
			console.log('搜索页');
		},
		onReady() {
			var height;
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#head"); //局部滑块
						view.boundingClientRect(data => {
							_this.topHeight = data.height;
							height = _this.phoneHeight - _this.topHeight;
							_this.scrollerHeight = height;
						}).exec();
					})
				},
			}); 
		},
		computed:{
		},
		methods: {
			getProductList() {
				if(this.queryForm.keyword) {
					let _this = this
					$H.get('/product/spu/wxSearch', this.queryForm).then(res => {
						if(res && res.list) {							
							_this.listData = _this.listData.concat(res.list)
							if(res.list.lenght == 0) {
								_this.hasMore = false;
							}
						}
					})	
					
				}				
			},
			searchHandle() {
				this.queryForm.pageNo = 1;
				this.queryForm.pageSize = 10;
				this.listData = [];
				this.getProductList();
			},
			chooseSpuHandle(id) {
				uni.navigateTo({url: '../../../pages/index/product-detail?pid=' + id});
			},
			onPullingHandle() {
				let _this = this;
				this.listData = [];
				this.queryForm.pageNo = 1;
				this.getProductList();
			},
			loadMore() {
				if(this.hasMore) {
					this.queryForm.pageNo += 1;
					this.getProductList();
				}
				else {
					uni.showToast({
						title: '已无更多数据',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page .other-head-mod{
		border-bottom: none;
	}
	.index-content {
		#head {
			height: auto;
			background: #FFFFFF;
			padding: 14rpx 20rpx;
			
			.search {
				width: 100%;
				height: 80rpx;
				border-radius: 200px;
				background: #F3F3F3;
				justify-content: space-between;
				padding-left: 30rpx;
				box-sizing: border-box;
				
				.search-input {
					padding: 12rpx 0;
					align-items: center;
					flex: 1;
					padding-right: 10rpx;
				}
				
				.search-icon {
					display: block;
					margin-right: 14rpx;
				}
				
				.input {
					display: block;
					width: 100%;
				}
				.search-btns {
					width: 112rpx;
					align-items: center;
					justify-content: center;
					border-left: 1px solid #E6E6E6;
					color: #FD5052;
				}
			}
		}
		
		.top-head {
			position: relative;
			width: 100%;
			padding: 14rpx 10rpx;
			box-sizing: border-box;
		}
		
		.body {
			
		}
	}
</style>
